<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Network Assembler</title>

  <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body mode="maker">

<script src="blockly_compressed.js"></script>
<script src="python_compressed.js"></script>
<script src="sumorobot.js"></script>

<div class="row">
  <div class="col-xs-7">
    <div class="blockly-editor">
      <div id="blocklyDiv" style="height: 800px; width: 100%;"></div>
        <xml id="toolbox" style="display: none">
          <block type="Dense"></block>
          <block type="Input"></block>
          <block type="flatten"></block>
          <block type="max_pool"></block>
          <block type="Conv2D"></block>
          <block type="Dropout"></block>
        </xml>
      </div>
    </div>
  <div id ="editor" class="col-xs-5" style="height: 800px; "></div>
</div>




  <p>
    <button onclick="showCode()" class="btn btn-primary">Show Python Code</button>
  </p>
  <script src="https://pagecdn.io/lib/ace/1.4.5/ace.js" integrity="sha256-5Xkhn3k/1rbXB+Q/DX/2RuAtaB4dRRyQvMs83prFjpM=" crossorigin="anonymous"></script>
  <script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.session.setMode("ace/mode/python");
</script>
  <script>
    var demoWorkspace = Blockly.inject('blocklyDiv',
        {media: '../../media/',
         toolbox: document.getElementById('toolbox')});
    Blockly.Xml.domToWorkspace(document.getElementById('toolbox'),
                               demoWorkspace);
    function showCode() {
      // Generate JavaScript code and display it.
      Blockly.Python.INFINITE_LOOP_TRAP = null;
      var code = Blockly.Python.workspaceToCode(demoWorkspace);
      var output = "import tensorflow as tf" + 
      " from tensorflow import keras" + 
      " from tensorflow.keras import layersmodel"  +
      " keras.Sequential(["
       + code+
       "])" 
      editor.setValue(output);
    }
    
  </script>
</body>
</html>
